<script setup>

import PageHeader from "@/components/PageHeader.vue";
import {onMounted, reactive} from "vue";
import axios from "axios";
import router from "@/router/index.js";
import PageFooter from "@/components/PageFooter.vue";

const props = {
  t1: "推荐",
  t2: "榜单",
  t1Url: {name: '1'},
  t2Url: {name: '2'}
}

const games = reactive([]);

onMounted(() => {
  axios.get("http://localhost:8081/goods/good").then(response => {
    games.splice(0, games.length, ...response.data);
  })
})

</script>

<template>
  <PageHeader :t1 = "props.t1" :t2 = "props.t2" :t1Url = "props.t1Url" :t2Url = "props.t2Url" />
  <div class = "sBox border p-2">
    <div class = "boxTitle d-flex">
      <span>为您推荐</span>
      <span @click = "router.push({name:'sc'})">已购买的游戏<svg t = "1738807809796" class = "icon"
                                                                 viewBox = "0 0 1024 1024" version = "1.1"
                                                                 xmlns = "http://www.w3.org/2000/svg"
                                                                 p-id = "5157"
                                                                 width = "32" height = "24"><path
          d = "M562.005333 512l-211.2-211.2 60.330667-60.288L682.666667 512l-271.530667 271.530667-60.330667-60.373334 211.2-211.2z"
          fill = "#808080" p-id = "5158"></path></svg></span>
    </div>
    <div class = "border cd">
      <div class = "cdb border mt-2" v-for = "item in games" :key = "item.id"
           @click = "router.push({path:`/GameDt/${item.steam_appid}/0/${item.id}` })">
        <div class = "border img"><img :src = "item.Avatar" width = "100%" alt = ""></div>
        <p class = "gameName">{{ item.name }}</p>
        <p v-if = "item.isFree === 1 && !item.discountPrice"><span class = "discount">￥<span>{{
            item.price / 100
          }}</span></span><span
            class = "price">￥<span>{{ item.discountPrice }}</span></span></p>
        <p v-if = "item.isFree === 1 && item.discountPrice"><span class = "discount">￥<span>{{
            item.discountPrice / 100
          }}</span></span><span
            class = "price">￥<span>{{ item.price }}</span></span></p>
        <p v-if = "item.isFree === 0">免费开玩</p>
        <p class = "label"><span>合作</span>|<span>多人</span></p>
      </div>
    </div>
  </div>
  <PageFooter />
</template>

<style scoped>
.sBox {
  margin-top: 60px;
}

.gameName {
  font-size: 16px;
  max-height: 20px;
  overflow: hidden;
  text-overflow: inherit;
}

.boxTitle {
  position: relative;
}

.boxTitle span {
  cursor: pointer;
}

.boxTitle span:last-child {
  position: absolute;
  right: -4%;
}

.icon {
  position: relative;
  top: -1px;
  left: -6px;
}

.cdb {
  width: 190px;
  height: 160px;
}

.cd {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cdb p {
  margin: 0;
  padding: 0;
}

.img {
  width: 190px;
  height: 90px;
  overflow: hidden;
  border-radius: 8px;
}

.label {
  color: gray;
  font-size: 12px;
}

.price {
  color: gray;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 4px;
}

.Percentage {
  margin-left: 4px;
}
</style>